<template>
  <nav class="list_article list list-x item-tb">
    <router-link
      class="item col-6 col-sm-4 col-md-3"
      v-for="(o, i) in list"
      :key="i"
      :to="'/article/details?' + vm.article_id + '=' + o[vm.article_id]"
    >
      <div class="article">
        <div class="media">
          <div class="icon">
            <img
              :src="$fullUrl(o[vm.img])"
              v-default-img="'/img/default.png'"
            />
          </div>
        </div>
        <div class="doc">
          <div class="title ellipsis_2" style="min-height:2.8rem">{{o[vm.title]}}</div>
          <div class="interact desc">
            <span class="praise">
              <b-icon icon="hand-thumbs-up"></b-icon>
              {{ o[vm.praise_len] }}
              </span>
            <span class="see"> 
              <b-icon icon="eye"></b-icon>
              {{ o[vm.hits] }}
              </span>
          </div>
          <div class="time">{{ o[vm.create_time] }}</div>
        </div>
      </div>
    </router-link>
  </nav>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    vm: {
      type: Object,
      default: function () {
        return {
          img: "img",
          article_id: "article_id",
          title: "title",
          description: "description",
          title: "title",
          create_time: "create_time",
          content: "content",
          praise_len: "praise_len",
          hits: "hits",
        };
      },
    },
  },
  methods: {},
};
</script>

<style scoped>
.article{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ellipsis_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
